
<template>
<div id="app">
<form action="#" v-show="flag">
      <h1>新增商品</h1>
        <div>
          <label>品牌名称:</label>
          <input type="text" v-model.trim="name"/>
        </div>
        <div>
          <label>创立时间:</label>
          <input type="text" v-model.trim="date"/>
        </div>
        <div>
          <label>单价:</label>
          <input type="text" v-model.number="price"/>
        </div>
        <div>
          <label>购买数量:</label>
          <input type="text" v-model.number="num"/>
        </div>
        <div>
          <button @click="add">确定提交</button>
        </div>
    </form>
    <button class="btn" @click="flag=true">新增</button>
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>单价</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr v-for="item in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.date}}</td>
        <td>{{item.price}}</td>
        <td>{{item.num}}</td>
        <td>
          <button @click="bur(item.id)">删除</button>
        </td>
      </tr>
      <tr>
        <td colspan="6" v-show="list.length===0">没有数据咯~</td>
      </tr>
      <tr>
        <td colspan="6" >总计：商品总数量 {{liang}}件，商品总价 ¥{{total}}</td>
      </tr>
    </table>
</div>
</template>
<script>
  export default {
    name:'app',
    data () {
      return {
        list:localStorage.getItem('list') && JSON.parse(localStorage.getItem('list')) || [],
        flag:false,
        name:'',
        date:'',
        price:'',
        num:''
      }
    },
    methods:{
        getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      add(){
        if(!this.name||!this.date||!this.price||!this.num) return alert('不要输入空')
        this.list.unshift({
          id:this.list.length+1,name:this.name,date:this.date,price:this.price,num:this.num
        })
        this.flag= false
      },
      bur(id){
       this.list = this.list.filter(ele=>ele.id!==id)
      }
    },
    computed:{
      total(){
        return this.list.reduce((per,cur) => per + (cur.price*cur.num),0).toFixed(2) || ''
      },
      liang(){
        return this.list.reduce((per,cur) => per + cur.num,0)
      }
    },
    watch:{
      'list':{
        deep:true,
        immediate:true,
        handler(val){
          localStorage.setItem('list',JSON.stringify(val))
        }
      }
    }
  }
</script>
<style  scoped>

#app {
      width: 600px;
      margin: 10px auto;
    }
    .btn {
      border: 1px solid #ccc;
      margin-bottom:10px;
      margin-top:40px;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

    .tb th {
      background-color: #0094ff;
      color: white;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
</style>
